<template>
	<div class="home">
		<div class="d-nav-title">
			<div @click="$emit('backList')" class="back-list">返回列表</div>
			<icon-svg style="margin: 0 8px" name="icon-right"></icon-svg>
			<div class="d-nav-title-goods" @click="openWindow">{{ params.product }}</div>
		</div>
		<div class="filter">
			<div class="filter-top">
				<div class="_top-filter">
					<div style="width:125px">
						<el-select
							size="mini"
							class="time-type"
							v-model="selects.timeType"
							@change="val => timeTypeResult({ timeType: val, page: 1 })"
						>
							<el-option label="创建时间" :value="0"></el-option>
							<el-option label="付款时间" :value="1"></el-option>
							<el-option label="结算时间" :value="2"></el-option>
						</el-select>
					</div>

					<div>
						<date-picker
							style="width:350px"
							:datas="datas"
							@change="
								val =>
									refresh(
										{
											startTime: val[0],
											endTime: val[1],
											page: 1,
											filterType: val[2]
										},
										'date'
									)
							"
							@refresh="refresh({ startTime: '', endTime: '', page: 1 }, 'date')"
						></date-picker>
					</div>
					<div>
						<select-taobao
							class="selects"
							v-model="selects.pid"
							@change="val => refresh({ taobaoId: val, page: 1 })"
						></select-taobao>
					</div>

					<div>
						<select-staff
							class="selects"
							v-model="selects.staffId"
							@change="val => refresh({ staffId: val, page: 1 })"
						></select-staff>
					</div>

					<div style="margin-left: 10px">
						<el-tag size="medium" type="info">{{
							selects.period == 0 ? '1小时' : '1天'
						}}</el-tag>
					</div>
				</div>
				<commission-count ref="commission-count"></commission-count>
			</div>
		</div>

		<div class="container">
			<div class="charts" style="background:#fff;">
				<div class="c-tabs">
					<div
						class="c-tab"
						v-for="(item, index) in leftNavs"
						:key="index"
						@click="activeName = index"
					>
						<div
							class="c-tab-title"
							:class="[activeName == index ? 'c-tab-title-active' : '']"
						>
							{{ item }}
						</div>
						<div
							class="c-tab-bar"
							:class="[activeName == index ? 'c-tab-bar-active' : '']"
						></div>
					</div>
				</div>
				<div class="card-body" v-if="activeName == '0'">
					<echart1 ref="charts"></echart1>
				</div>
			</div>

			<div class="card card-plan">
				<div class="card-top">
					<div class="c-tabs">
						<div
							class="c-tab"
							v-for="(item, index) in rightNavs"
							:key="index"
							@click="rightActiveName = index"
						>
							<div
								class="c-tab-title"
								:class="[rightActiveName == index ? 'c-tab-title-active' : '']"
							>
								{{ item }}
							</div>
							<div
								class="c-tab-bar"
								:class="[rightActiveName == index ? 'c-tab-bar-active' : '']"
							></div>
						</div>
					</div>
					<div class="parment-select" v-if="rightActiveName == 2">
						<select-group @change="val => refreshParment(val)"></select-group>
					</div>
					<div class="card-top-select">
						<el-select
							size="mini"
							class="selects"
							@change="val => rightFilter({ tkStatus: val, page: 1 })"
							v-model="cardSelectValue"
						>
							<el-option label="全部订单" value></el-option>
							<el-option label="订单结算" :value="3"></el-option>
							<el-option label="订单付款" :value="12"></el-option>
							<el-option label="订单失效" :value="13"></el-option>
						</el-select>
					</div>
				</div>

				<div class="card-body">
					<cl-crud ref="crud" @load="onLoad">
						<template #table-column-switch="{ scope }">
							<template v-if="rightActiveName == 0">
								<div class="text-overflow" style="width:100%">
									{{ scope.row.adzoneName }}
								</div>
							</template>
							<template v-if="rightActiveName == 1">
								<div
									style="text-align:center;width:100%"
									class="flex-center;flex:1"
								>
									{{ scope.row.staffName }}
								</div>
							</template>
							<template v-if="rightActiveName == 2">
								<div
									style="text-align:center;width:100%"
									class="flex-center;flex:1"
								>
									{{ scope.row.departmentName }}
								</div>
							</template>
						</template>
						<template #table-header-switch>
							<template v-if="rightActiveName == 0">推广位</template>
							<template v-if="rightActiveName == 1">名称</template>
							<template v-if="rightActiveName == 2">组名</template>
						</template>
					</cl-crud>
				</div>
			</div>
		</div>
		<!-- 底部列表 -->
		<div class="footer-list">
			<cl-crud @load="onFooterLoad">
				<template #table-column-address="{ scope }">
					<div class="text-overflow">{{ scope.row.address }}</div>
				</template>
				<template #table-column-hesitateTime="{ scope }">
					{{ formatDate(scope.row.hesitateTime) }}
				</template>
			</cl-crud>
		</div>
	</div>
</template>

<script>
import Echart1 from '@/components/echarts/1.vue';
import commissionCount from '@/components/order/commission-count.vue';
import DatePicker from '@/components/order/date-picker';
import SelectTaobao from '@/components/order/select-taobao';
import SelectStaff from '@/components/order/select-staff';
import { dateFormat, formatDate, timeDiff } from '@/utils/index';
import SelectGroup from '@/components/order/select-group';

export default {
	components: {
		Echart1,
		commissionCount,
		DatePicker,
		SelectTaobao,
		SelectStaff,
		SelectGroup
	},

	data() {
		return {
			// searchKey: '',
			cardSelectValue: '',
			selects: {
				timeType: 0,
				period: 0,
				staffId: '',
				pid: ''
			},
			activeName: '0',
			rightActiveName: 0,
			leftNavs: ['趋势图'],
			rightNavs: ['推广位', '运营人', '组织统计'],
			rightListLength: 0,
			crud: '',
			footerCrud: '',
			params: {},
			crudServe: this.$service.home.topPosition,
			datas: []
		};
	},
	watch: {
		rightActiveName(val) {
			switch (val) {
				case 0:
					this.crudServe = this.$service.home.topPosition;
					break;
				case 1:
					this.crudServe = this.$service.home.topStaff;
					break;
				case 2:
					this.crudServe = this.$service.home.topGroup;
					break;
			}
			this.$refs['crud'].service.page = this.crudServe;
			this.crud.refresh({
				page: 1,
				size: 10,
				teamId: null
			});
		}
	},
	computed: {},
	methods: {
		// 筛选组织
		refreshParment(val) {
			this.$refs['crud'].service.page = this.$service.home.topGroup;
			this.crud.refresh({
				page: 1,
				size: 10,
				teamId: val
			});
		},
		// 详情重新刷新 给请求参数赋值并刷新数据
		detailRefresh(params) {
			this.params = params;
			let { startTime, endTime } = this.params;
			this.$nextTick(() => {
				// this.datas = [startTime, endTime];
				if (startTime && endTime) this.datas = [startTime, endTime]; //有具体时间才赋值，防止自定义时间插件报错
				this.refresh(this.params, 'date');
			});
		},
		timeTypeResult(params) {
			let prop = '';
			if (params.timeType == 0) {
				prop = 'tkCreateTime';
			} else if (params.timeType == 1) {
				prop = 'tkPaidTime';
			} else if (params.timeType == 2) {
				prop = 'tkEarningTime';
			}
			this.refresh({
				...this.params,
				prop
			});
		},
		formatDate,
		// 重刷
		refresh(params, type) {
			if (type === 'date') {
				if (params.startTime && params.endTime) {
					let comTime = timeDiff(params.startTime, params.endTime);
					this.selects.period = comTime > 0 ? 1 : 0;
					params.period = this.selects.period;
					this.params = {
						...this.params, // 这一句我加的，防止标题被清空
						...params
					};
				} else {
					params = {
						...params,
						...dateFormat(0)
					};
				}
			}
			this.crud.refresh({
				...params,
				page: 1,
				size: 10
			});
			this.footerCrud.refresh(params);
		},
		rightFilter(params) {
			this.crud.refresh(params);
		},
		// top crud 初始化
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service({
				page: this.$service.home.topPosition
			})
				.set('table', {
					columns: [
						{
							type: 'index',
							align: 'center',
							label: 'TOP10',
							width: 70
						},
						{
							label: '推广位',
							prop: 'switch',
							align: 'center',
							minWidth: 100
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							sortable: true,
							align: 'center',
							emptyText: '0',
							width: 100
						},
						{
							label: '有效单数',
							prop: 'validOrderNum',
							sortable: true,
							emptyText: '0',
							width: 100,
							align: 'center'
						}
					],
					op: {
						visible: false
					},

					props: {
						'max-height': '455px',
						'default-sort': {
							order: 'descending',
							prop: 'validCommission'
						}
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入运营人名称'
					}
				})
				.set('pagination', {
					page: 1,
					size: 10
				})
				.set('layout', [['data-table'], ['flex1', 'pagination']])
				.on('refresh', async (params, { next }) => {
					if (this.rightActiveName != 2) params.teamId = null;
					const { list } = await next({
						...params
					});
					this.rightListLength = list.length;
					list.map(item => {
						if (item.totleCommission) {
							item.totleCommission = parseFloat(item.totleCommission).toFixed(2);
						}
					});
				})
				.done();
		},

		// footer crud 初始化
		onFooterLoad({ ctx, app }) {
			this.footerCrud = app;

			ctx.service(this.$service.order)
				.set('dict', {
					api: {
						page: 'timeStatistics'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							align: 'center',
							label: '序号',
							width: 70
						},
						{
							label: '时间',
							prop: 'time',
							sortable: true,
							align: 'center',
							width: 150
						},
						{
							label: '平均犹豫时长',
							prop: 'hesitateTime',
							align: 'center'
						},
						{
							label: '全部单数',
							prop: 'orderNum',
							sortable: true,
							align: 'center',
							emptyText: '0'
						},
						{
							label: '有效单数',
							prop: 'validOrderNum',
							sortable: true,
							align: 'center',
							emptyText: '0'
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							sortable: true,
							align: 'center',
							emptyText: '0'
						}
					],
					op: {
						visible: false
					},

					props: {
						'max-height': '100000px',
						'tree-props': { children: 'children', hasChildren: 'hasChildren' },
						'row-key': 'id',
						stripe: true
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入运营人名称'
					}
				})
				.set('layout', [['data-table']])
				.on('refresh', async (params, { next }) => {
					const { subData, list } = await next(params);
					this.$refs['commission-count'].refresh(subData);
					this.$refs['charts'].refresh(this.formatChart(list));
				})
				.done();
		},
		// 格式化图表数据
		formatChart(list) {
			const titleArr = ['全部单数', '有效单数', '有效佣金'];
			let obj = {
				data: titleArr.map(item => {
					return {
						name: item,
						type: 'line',
						data: [],
						smooth: true
					};
				}),
				xAxis: [],
				legendSelect: {},
				lengend: titleArr
			};

			titleArr.map(item => {
				obj.legendSelect[item] = true;
			});
			list.map(item => {
				obj.data[0].data.push(item.orderNum);
				obj.data[1].data.push(item.validOrderNum);
				obj.data[2].data.push(item.validCommission);
				obj.xAxis.push(item.time);
			});

			return obj;
		},
		openWindow() {
			window.open(this.params.itemLink, '_blank');
		}
	}
};
</script>
<style lang="stylus" scoped>
.home {
	overflow-y: auto;
    height:100%;
	overflow-x: hidden;
	.d-nav-title {
		margin  0 auto
		height 60px
		font-size 16px
		font-weight 500
		background-color #fff
		color #000
		line-height 60px
		padding-left 23px
		margin-bottom 6px
		display flex
		align-items center
		position relative
		.title-search {
			display flex
			position absolute
			right 10px
		}
		.d-nav-title-goods {
			cursor pointer
			transition .3s
			&:hover {
				color: $main-color
			}
		}
}
	.filter {
		height: calc(152px + 50px);
		margin: 0 auto;
		background-color: #ffffff;
		padding: 10px 10px 0 10px;
	}

	.container {
		min-height 570px
		margin: 0 auto;
		height: calc(100vh - 202px - 60px - 6px - 21px - 30px - 60px - 6px );
		margin-top: 20px;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;

		.charts {
			width: 60%;
			padding-top: 15px;
			padding-right 18px
		}

		.card {
			width: calc(40% - 21px);
			background-color: #fff;
			border-radius: 5px;
			box-sizing: border-box;
			margin-left: 21px;
			padding-top: 15px;
			.avatar {
                width:26px;
                height:26px;
                background:rgba(234,234,234,1);
                border-radius:50%;
            }
            .card-top {
				display flex
				justify-content space-between
				padding-right 10px;
			}
			.card-title {
				color: #000;
				padding: 20px 20px 0 20px;
			}
			.card-top-select {
				width 125px
			}
			.parment-select {
				padding-right: 17px;
				display: flex;
				justify-content: flex-end;
				flex:1
			}

		}
	}
}


.my-list-more {
	color #B5B5B5
	font-size 14px
	font-weight 400
	width 100%
	text-align center
	cursor pointer
	height 50px
	line-height 50px
}
>>>.el-table .el-table__header-wrapper {
	box-shadow:0px 3px 6px rgba(0,0,0,0.16);
	position relative
	z-index 2
	background-color #fff
}



.text-overflow {
	textOverflow()
    width 100px
}



>>>.crud-index {
	padding 0
	.card-body {
		padding 0
	}
	.el-row .crud-data-table .el-table th {
			background: #fff !important;
	}
}
>>>.crud-index .el-row:nth-child(1) {
	padding 0 !important
}

.footer-list {
	background-color #fff
	margin 0 auto
	margin-top 23px
	margin-bottom 30px
	>>>.el-table .el-table__header-wrapper {
		box-shadow:0px 3px 6px rgba(0,0,0,0.0);
		position relative
		z-index 2
		background-color #fff
	}
}
</style>
